<div class="row">
    <div class="col-sm-12">

        <h3 class="pageHeading">Demo > Disabling / Enabling</h3>        

        <p>
            You can disable the directive, as well as each selection item in it.
            As you might have guessed, you can do this programmatically, on the fly.
            When the directive is disabled, You can still toggle the dropdown button 
            and see the items, but some of the directive's button will be hidden.
        </p>
        
        <br />
        <div
            isteven-multi-select 
            input-model="modernBrowsers" 
            output-model="outputBrowsers"
            button-label="icon name"        
            item-label="icon name maker"        
            tick-property="ticked"        
            helper-elements="all"            
            disable-property="disabled"
            is-disabled="disableDir"
            >
        </div>  

        <h5>Disable / enable the directive</h5>
        <p>
            Click one of the buttons below to disable or enable the directive.
        </p>        
        <p>
            <button type="button" class="btn btn-danger btn-xs" ng-click="disableDir = true" >Disable</button>    
            <button type="button" class="btn btn-success btn-xs" ng-click="disableDir = false" >Enable</button>      
        </p>        
        <h5>Disable / enable singular item</h5>
        <p>
            You need to use <code>disable-property</code> attribute to define which object is disabled / enabled.
            Click one of the buttons below to disable or enable the first browser.
        </p>        
        <p>
            <button type="button" class="btn btn-danger btn-xs" ng-click="modernBrowsers[ 0 ].disabled = true" >Disable the first browser</button>    
            <button type="button" class="btn btn-success btn-xs" ng-click="modernBrowsers[ 0 ].disabled = false" >Enable the first browser</button>      
        </p>        
        
        <br />
        <div role="tabpanel">

          <!-- Nav tabs -->
          <ul class="nav nav-tabs" role="tablist">
            <li role="presentation" class="active"><a data-target="#view" aria-controls="home" role="tab" data-toggle="tab">View</a></li>
            <li role="presentation"><a data-target="#controller" aria-controls="profile" role="tab" data-toggle="tab">Controller</a></li>
          </ul>

          <!-- Tab panes -->
          <div class="tab-content">
            <div role="tabpanel" class="tab-pane active" id="view">
                <p>Define your directive:</p>
                <pre><code>&lt;div
    isteven-multi-select
    input-model="modernBrowsers"
    output-model="outputBrowsers"
    button-label="icon name"
    item-label="icon name maker"
    tick-property="ticked"
    ...
    disable-property="disabled"
    is-disabled="disableDir"
&gt;
&lt;/div&gt;</code></pre>
            </div>
            <div role="tabpanel" class="tab-pane" id="controller">
                <p>Define your input-model:</p>
        <div class="fauxCode hljs xml">
            $scope.modernBrowsers = [
            <table>
                <tr class="hljs-tag" ng-repeat="row in modernBrowsers" >
                    <td>&nbsp;</td>
                    <td>{</td>
                    <td><span class="hljs-attribute">icon</span>: <span class="hljs-value">"{{removeHost(row.icon)}}"</span>,</td>
                    <td><span class="hljs-attribute">name</span>: <span class="hljs-value">"{{row.name}}"</span>,</td>
                    <td><span class="hljs-attribute">maker</span>: <span class="hljs-value">"{{row.maker}}"</span>,</td>
                    <td><span class="hljs-attribute">ticked</span>: <span class="hljs-value">{{row.ticked}}</span></td>
                    <td>}<span ng-if="$index < modernWebBrowsers.length - 1">,</span></td>
                </tr>
            </table>
            ];
        </div>  
            </div>
          </div>

        </div>
    </div>
</div>

<div class="row">
    <div class="col-sm-12">              
        <h5>Output model</h5>
        <p>
            Look at the <code>output-model</code> below to see the values getting updated 
            as you select / deselect an item in the directive. Icons in the objects are actually full HTML <code>img</code> tag, shortened for simplicity. 
        </p>        
        <div class="fauxCode hljs xml">
            $scope.outputBrowsers = [
            <table>
                <tr class="hljs-tag" ng-repeat="row in outputBrowsers" >
                    <td>&nbsp;</td>
                    <td>{</td>
                    <td><span class="hljs-attribute">icon</span>: <span class="hljs-value">"{{removeHost(row.icon)}}"</span>,</td>
                    <td><span class="hljs-attribute">name</span>: <span class="hljs-value">"{{row.name}}"</span>,</td>
                    <td><span class="hljs-attribute">maker</span>: <span class="hljs-value">"{{row.maker}}"</span>,</td>
                    <td><span class="hljs-attribute">ticked</span>: <span class="hljs-value">{{row.ticked}}</span></td>
                    <td>}<span ng-if="$index < modernWebBrowsers.length - 1">,</span></td>
                </tr>
            </table>
            ];
        </div>                
    </div>        
</div>

<script>    
    $(document).ready(function() {
      $('pre code').each(function(i, block) {
        hljs.highlightBlock(block);
      });
    });
</script>
